﻿@{
    ViewBag.Title = "HTML5Elements";
}
<h2>
    HTML5Elements</h2>

<form>
E-Mail:
<input type="email" required placeholder="Bitte EMail eingeben">
URL:
<input type="url" required placeholder="Bitte URL eingeben">
@* 555-555-5555 Telefonnummer US mit Regular Expression mit pattern Propperty
5555555555
1-555-555-5555
15555555555
(555)-555-5555*@ Telefone:
<input type="tel" placeholder="bitte Telefonnummer angeben" pattern="(\d-)?\(?\d{3}\)?-?\d{3}-?\d{4}">
Searchfield:
<input type="search" results />
Nummern:
<input type="number" placeholder="Bitte eine Nummer angeben" >
Slider:
<input type="range" min="0" max="255" value="45" step="5">
<input type="submit">
</form>
<script>

    //dem localen Storage den Wert hinzufügen
    localStorage.setItem('name', 'SquadWuschel');
    //localStorage.name = 'SquadWuschel';
    //localStorage['name'] = 'SquadWuschel';

    if (localStorage.getItem('name')) {
        var name = localStorage.name;
        //setzte den namen irgendwo

        //nur den namen löschen
        localStorage.removeItem('name');
        //löschen des localen Storage
        localStorage.clear();
    }
    
    (function () {
        //Prüfen ob unser Input Control den typ range unterstützt 
        function supportRange() {
            var i = document.createElement('input');
            i.setAttribute('type', 'range');
            return (i.type === 'range');
        }

        if (supportRange) {
            //do something
        }
    })();
</script>

<script>

    //Feature Dedection
    
    //Prüfen ob der aktuelle Browser das element unterstützt in unserm falle nicht unterstützt durch !
    if (!'placeholder' in document.createElement('input')) {
        //a polyfill - Fallback JavaScript Solution einbinden
    }

    function testSupport(inputType) {
        var i = document.createElement('input');
        i.setAttribute('type', inputType);
        return i.type === inputType;
    }
    
    if (!testSupport('email')) {
        //provide fallback
    }

    //Prüfen ob HTML5 Local Storage zur Verüfgung steht.
    function supportLocalStorage() {
        try {
            return 'localStorage' in window && window.localStorage !== null;
        } catch (e) {
            return false;
        } 
    }

    //GeoLocation
    if (!!navigator.geolocation) {
       // alert('track me');
    }


    //Modernizr
    if (!Modernizr.localstorage) {
        //Fallback Solution
    }
    
    if (!Modernizr.geolocation) {
        //Fallback solution
    }

    if (Modernizr.history) {
        //abhängig davon ob ein Feature unterstützt wird, das passende js Script nachladen
        //achtung beim ERstellen der modernizr scriptes muss unter "Extras->load" mit angeklickt sein
        Modernizr.load({
            test: Modernizr.localstorage,
            nope: 'localstorage.js',
            complete: function() {
                //do something
            }
        });


        //history.go(-1)
        //New History Functions, hier kann man eine neue URL mit JavaScript setzten
        history.pushState(
        //data
        //title
        //url
            'some data',
            'my Page title',
            'http://localhost:52328/'
        );

        //Vorwärts oder backwards Buttons auf der aktuellen Seite wurden geklickt, dann wird dieses event ausgelöst
        window.addEventListener('popstate', function(e) {

        });
    }

</script>
